#header
  height: banner-height
  position: relative
  border-bottom: 1px solid color-widget-background

#header-outer
  height: 100%
  position: relative

#banner
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  background: url(banner-url) center color-grey
  background-size: cover
  z-index: -1

#upper-nav
  overflow: hidden
  margin-top: 10px

#main-nav-toggle
  display: none
  &:before
    content: "\f0c9"
  @media mq-mobile
    display: block

.sub-nav
  float: right

#nav-rss-link
  &:before
    content: "\f09e"

#nav-github
  &:before
    content: "\f09b"

$nav-link
  float: left
  color: #fff
  opacity: 0.6
  text-decoration: none
  text-shadow: 0 1px rgba(0, 0, 0, 0.2)
  transition: opacity 0.2s
  display: block
  padding: 20px 15px
  &:hover
    opacity: 1

.nav-icon
  @extend $nav-link
  font-family: font-icon
  text-align: center
  font-size: font-size
  width: font-size
  height: font-size
  line-height: font-size
  padding: 20px 15px
  position: relative
  cursor: pointer

#header-title
  position: relative
  overflow: hidden
  float: left
  bottom: -50px
  left: 20px
  @media mq-mobile
    position: absolute
    bottom: 60px

#blog-title
  text-decoration: none
  color: #fff
  font-size: blog-title-size
  font-weight: bold
  font-family: 'Times New Roman'
  line-height: blog-title-size
  padding: 5px 10px
  text-shadow:  1px 1px 4px rgba(0,0,0,0.4),
                0px 1px 10px rgba(0,0,0,0.1),
                0px 6px 15px rgba(0,0,0,0.1)

#main-nav
  font-size: 0
  position: absolute
  overflow: hidden
  bottom: 0
  left: 20px

.main-nav-link
  cursor: pointer
  font-size: 14px
  font-weight: bold
  line-height: 2.5em
  display: inline-block
  text-decoration: none
  position: relative
  width: 7.5em
  background: color-background
  box-sizing: border-box
  color: color-main-nav-link
  text-align: center
  transition: background 0.3s ease
  box-shadow: 6px 12px 25px 2px rgba(68,68,68,0.3)
  &:hover
    background: color-main-nav-link-hover
    color: color-default
  &:active
    background: color-main-nav-link-active
    box-shadow: 9px 12px 25px 2px rgba(68,68,68,0.3)
  &:nth-child(1)
    z-index: 998
  &:nth-child(2)
    z-index: 997
  &:nth-child(3)
    z-index: 996
  &:nth-child(4)
    z-index: 995
  &:nth-child(5)
    z-index: 994
  &:nth-child(6)
    z-index: 993
  @media mq-mobile
    display: none

// CSS Animated Cube
#contenedor
  @media mq-mobile
    display: none
  box-sizing: border-box
  position: absolute
  top: 50%
  right: 15%;
  margin-top: -50px
  margin-left: -50px
  width: 100px
  height: 100px
  perspective: 250px
  ul
    box-sizing: border-box
    cursor: all-scroll
    display: block
    width: 100%
    height: 100%
    transform-style: preserve-3d
    margin: 0
    padding: 0
    animation-name: spincube
    animation-timing-function: ease
    animation-iteration-count: forward
    animation-duration: 10s
    transform-style: preserve-3d
    transform-origin: 50px 50px 0
    transform: rotateX(-25deg) rotateY(32deg)
    li
      box-sizing: border-box
      background: rgba(253,254,255,.9)
      border: 1px solid #555
      display: block
      list-style-type: none
      position: absolute
      width: 100%
      height: 100%
      font-size: 1.5em
      color: rgba(0,0,0,0.5)
      letter-spacing: 1px
      text-align: center
      line-height: 100px
      user-select: none

.cara:nth-child(1)
  transform: translateZ(50px)

.cara:nth-child(2)
  transform: rotateX(-90deg) translateZ(50px)

.cara:nth-child(3)
  transform: rotateX(90deg) rotateZ(-90deg) translateZ(50px)

.cara:nth-child(4)
  transform: rotateY(-90deg) translateZ(50px)

.cara:nth-child(5)
  transform: rotateY(90deg) rotateZ(90deg) translateZ(50px)

.cara:nth-child(6)
  transform: rotateY(180deg) translateZ(50px)

.animar
  transition: all 1s

.noanimar
  transition: none

// @keyframes spincube
//   from,to  { }
//   16%      { transform: rotateX(90deg); }
//   33%      { transform: rotateY(-90deg) rotateZ(90deg); }
//   50%      { transform: rotateY(90deg); }
//   66%      { transform: rotateX(-90deg) rotateZ(-90deg); }
//   83%      { transform: rotateY(180deg) ; }

